<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>骑手注册</title>
    <link href="../pages/layui/css/layui.css" rel="stylesheet">
    <link href="../pages/css/style.css" rel="stylesheet">
    <script src="../layui/layui.js"></script>
    <script>
        // 验证密码
        function verification() {
            var pw1 = document.getElementById("confirmPassword").value;
            var pw2 = document.getElementById("password").value;
            console.log(document.getElementById("password").value == '');
            console.log(pw2);
            //判断密码是否为空
            if (document.getElementById("password").value == '') {
                document.getElementById("nopwdError").innerHTML = "请输入密码";
                document.getElementById("button").disabled = true;
            } else {
                //判断两次密码是否相同
                if (pw1 == pw2) {
                    document.getElementById("pwdError").innerHTML = "";
                    document.getElementById("button").disabled = false;
                } else {
                    document.getElementById("pwdError").innerHTML = "两次密码不相同";
                    document.getElementById("button").disabled = true;
                }
            }
        }

        //判断用户名是否输入
        function verifyUsername() {
            console.log(document.getElementById("username").value === '');
            console.log(document.getElementById("username").value);
            if (document.getElementById("username").value === '') {
                document.getElementById("usernameError").innerHTML = "请输入用户名";
                document.getElementById("button").disabled = true;
            } else {
                document.getElementById("usernameError").innerHTML = "";
                document.getElementById("button").disabled = false;
            }
        }

        // 判断账号是否输入
        function verifyAccount() {
            if (document.getElementById("account").value === '') {
                document.getElementById("accountError").innerHTML = "请输入账号";
                document.getElementById("button").disabled = true;
            } else {
                document.getElementById("accountError").innerHTML = "";
                document.getElementById("button").disabled = false;
            }
        }

        // 判断账号是否输入
        function verifyPhone() {
            if (document.getElementById("phone").value === '') {
                document.getElementById("noPhError").innerHTML = "请输手机号";
                document.getElementById("button").disabled = true;
            } else {
                document.getElementById("noPhError").innerHTML = "";
                document.getElementById("button").disabled = false;
            }
        }
    </script>
</head>

<body>
<div class="reg">
    <h1 class="reg-title">骑手注册</h1>
    <form action="/order/register/rider" class="layui-form" method="post">
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input class="layui-input" id="username" name="name" onblur="verifyUsername()" placeholder="请输入姓名"
                           type="text">
                </div>
            </div>
            <p id="usernameError" style="color: red"></p>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-user"></i>
                    </div>
                    <input class="layui-input" id="account" name="account" onblur="verifyAccount()" placeholder="请输入账号"
                           type="text">
                </div>
            </div>
            <p id="accountError" style="color: red"></p>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-cellphone-fine"></i>
                    </div>
                    <input class="layui-input" id="phone" name="phone" onblur="verifyPhone()" placeholder="请输入手机号"
                           type="text">
                </div>
            </div>
            <p id="noPhError" style="color: red"></p>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input class="layui-input" id="password" name="password" onblur="verification()" placeholder="请输入密码"
                           type="password">
                </div>
            </div>
            <p id="nopwdError" style="color: red"></p>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input class="layui-input" id="confirmPassword" name="confirmPassword" onblur="verification()"
                           placeholder="确认密码" type="password">
                </div>
            </div>
            <p id="pwdError" style="color: red"></p>
        </div>
        <span id="pwdError"></span>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input class="layui-input" id="captcha" name="captcha" placeholder="验证码" type="text">
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div style="margin-left: 10px;">
                        <img height="40px"
                             onclick="this.src='/order/captcha.jpg?'+ new Date().getTime();" src="/order/captcha.jpg"
                             width="120px">
                    </div>
                </div>
            </div>
            <p style="color: red" th:text="${Error}"></p>
        </div>
        <span>已有帐号？<a href="../login/rider">登录</a></span>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" id="button" lay-filter="demo-login" lay-submit
                    type="submit">登录
            </button>
        </div>
    </form>
</div>
<script>

</script>
</body>

</html>